<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>使用Hexo-Gitee创建个人网站 | Beautiful Code Creates Beautiful Life!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="折腾了许久，踩了几个坑，终于搞定了基础环境配置。简单记录一下。 1 环境搭建（1） 安装Hexo打开shell终端，输入如下命令，如果提示权限错误，命令前加sudo,cnpm 是淘宝的开源镜像，国内访问比npm快。 12npm install -g hexo 		# 方法1sudo cnpm install -g hexo 	# 方法2 顺利的话，会有类似如下的控制台打印信息输出： 1234567">
<meta property="og:type" content="article">
<meta property="og:title" content="使用Hexo-Gitee创建个人网站">
<meta property="og:url" content="http://tshfut.gitee.io/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/index.html">
<meta property="og:site_name" content="Beautiful Code Creates Beautiful Life!">
<meta property="og:description" content="折腾了许久，踩了几个坑，终于搞定了基础环境配置。简单记录一下。 1 环境搭建（1） 安装Hexo打开shell终端，输入如下命令，如果提示权限错误，命令前加sudo,cnpm 是淘宝的开源镜像，国内访问比npm快。 12npm install -g hexo 		# 方法1sudo cnpm install -g hexo 	# 方法2 顺利的话，会有类似如下的控制台打印信息输出： 1234567">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="http://tshfut.gitee.io/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/directory.png">
<meta property="og:image" content="http://tshfut.gitee.io/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/blog_title.png">
<meta property="og:image" content="http://tshfut.gitee.io/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/create_repo.png">
<meta property="og:image" content="http://tshfut.gitee.io/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/publish.png">
<meta property="article:published_time" content="2020-01-25T05:24:24.159Z">
<meta property="article:modified_time" content="2020-01-25T05:24:24.159Z">
<meta property="article:author" content="tshfut">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://tshfut.gitee.io/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/directory.png">
  
    <link rel="alternate" href="/articles/atom.xml" title="Beautiful Code Creates Beautiful Life!" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/articles/css/style.css">

<meta name="generator" content="Hexo 4.2.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/articles/" id="logo">Beautiful Code Creates Beautiful Life!</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/articles/" id="subtitle">Code &amp; Life</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/articles/">Home</a>
        
          <a class="main-nav-link" href="/articles/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/articles/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://tshfut.gitee.io/articles"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-使用Hexo-Gitee创建个人网站" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/" class="article-date">
  <time datetime="2020-01-25T05:24:24.159Z" itemprop="datePublished">2020-01-25</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      使用Hexo-Gitee创建个人网站
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>折腾了许久，踩了几个坑，终于搞定了基础环境配置。简单记录一下。</p>
<h3 id="1-环境搭建"><a href="#1-环境搭建" class="headerlink" title="1 环境搭建"></a>1 环境搭建</h3><h4 id="（1）-安装Hexo"><a href="#（1）-安装Hexo" class="headerlink" title="（1） 安装Hexo"></a>（1） 安装Hexo</h4><p>打开shell终端，输入如下命令，如果提示权限错误，命令前加sudo,cnpm 是淘宝的开源镜像，国内访问比npm快。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo 		# 方法1</span><br><span class="line">sudo cnpm install -g hexo 	# 方法2</span><br></pre></td></tr></table></figure>
<p>顺利的话，会有类似如下的控制台打印信息输出：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> sudo cnpm install -g hexo</span></span><br><span class="line">Password:</span><br><span class="line">Downloading hexo to /usr/local/lib/node_modules/hexo_tmp</span><br><span class="line">Copying /usr/local/lib/node_modules/hexo_tmp/_hexo@3.7.1@hexo to /usr/local/lib/node_modules/hexo</span><br><span class="line">Installing hexo's dependencies to /usr/local/lib/node_modules/hexo/node_modules</span><br><span class="line">[1/27] abbrev@^1.0.7 installed at node_modules/_abbrev@1.1.1@abbrev</span><br><span class="line">......//此处省略一些打印</span><br><span class="line">[27/27] warehouse@^2.2.0 installed at node_modules/_warehouse@2.2.0@warehouse</span><br><span class="line">execute post install 2 scripts...</span><br><span class="line">[1/2] scripts.postinstall nunjucks@^3.1.2 run "node postinstall-build.js src"</span><br><span class="line">[1/2] scripts.postinstall nunjucks@^3.1.2 finished in 109ms</span><br><span class="line">[2/2] scripts.install hexo-fs@0.2.3 › chokidar@1.7.0 › fsevents@^1.0.0 run "node install"</span><br><span class="line">[fsevents] Success: "/usr/local/lib/node_modules/hexo/node_modules/_fsevents@1.2.4@fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed</span><br><span class="line">Pass --update-binary to reinstall or --build-from-source to recompile</span><br><span class="line">[2/2] scripts.install hexo-fs@0.2.3 › chokidar@1.7.0 › fsevents@^1.0.0 finished in 306ms</span><br><span class="line">deprecate titlecase@^1.1.2 no longer maintained</span><br><span class="line">Recently updated (since 2018-08-01): 1 packages (detail see file /usr/local/lib/node_modules/hexo/node_modules/.recently_updates.txt)</span><br><span class="line"> 2018-08-06</span><br><span class="line">   → resolve@1.8.1 › path-parse@^1.0.5(1.0.6) (14:32:36)</span><br><span class="line">All packages installed (280 packages installed from npm registry, used 4s, speed 1.65MB/s, json 236(1.51MB), tarball 5.8MB)</span><br><span class="line">[hexo@3.7.1] link /usr/local/bin/hexo@ -&gt; /usr/local/lib/node_modules/hexo/bin/hexo</span><br></pre></td></tr></table></figure>

<h4 id="（2）-初始化Hexo"><a href="#（2）-初始化Hexo" class="headerlink" title="（2） 初始化Hexo"></a>（2） 初始化Hexo</h4><p>在电脑上创建一个目录，用于存放工程文件，cd到这个目录中，执行如下命令：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo init</span><br></pre></td></tr></table></figure>
<p>成功后会有类似如下的提示</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">...此处省略一个打印信息</span><br><span class="line">npm notice created a lockfile as package-lock.json. You should commit this file.</span><br><span class="line">added 439 packages from 497 contributors in 14.887s</span><br><span class="line">INFO  Start blogging with Hexo!</span><br></pre></td></tr></table></figure>
<p> 刚刚初始化好的工程目录大致如下图所示</p>
<!--
![I'm a Picture](使用Hexo+Gitee创建个人网站/directory.png)
-->
<img src="/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/directory.png" class title="init directory">

<p>其实到这里，如果顺利的话，已经成功了一大半了。</p>
<h4 id="（3）-修改博客基本信息"><a href="#（3）-修改博客基本信息" class="headerlink" title="（3） 修改博客基本信息"></a>（3） 修改博客基本信息</h4><p>博客的基本配置信息保存在根目录的 _config.yml 文件中，下图所示为博客的基本信息</p>
<img src="/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/blog_title.png" class width="400" height="210" title="init directory">
<p>配置好基本信息后，依次输入如下命令，即可在本地开户预览</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g</span><br><span class="line">hexo s</span><br></pre></td></tr></table></figure>
<p>然后在浏览器中输入 <a href="http://localhost:4000/articles/" target="_blank" rel="noopener">http://localhost:4000/articles/</a> 即可查看实际出来的效果了。</p>
<h4 id="（4）将博客部署到Gitee上"><a href="#（4）将博客部署到Gitee上" class="headerlink" title="（4）将博客部署到Gitee上"></a>（4）将博客部署到Gitee上</h4><p>首先，需要一个Gitee的账号，直接在gitee官网申请即可。<br>点击右上角的+号，创建新的仓库，输入仓库名称和路径，一般gitee会保持仓库名称和路径一致，如果不想保持一致，可以手动更改，这个没有特殊要求。个人用户一般选择仓库类型为开源，最后点击创建即可。</p>
<img src="/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/create_repo.png" class title="create repo">

<p>然后，在__config.yml文件中配置git相关信息，注意这里的repo链接，一定是从刚才创建好的仓库这一页那里的『克隆与下载』那个地方复制过来的。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: 'git'</span><br><span class="line">  repo: https://gitee.com/tshfut/articles.git</span><br><span class="line">  branch: master</span><br></pre></td></tr></table></figure>
<p>接着，在刚才建好的仓库的主界面中依次点击『服务』-&gt;『Gitee Pages』选择对应的分支和部署目录，点击『创建即可』（这里我已经创建过了，所以显示的是更新按钮）。</p>
<img src="/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/publish.png" class title="create repo">

<p>这里要记住Gitee Pages生成的网站地址，如我的是： <a href="http://tshfut.gitee.io/articles">http://tshfut.gitee.io/articles</a> 。<br>在__config.yml文件中，找到URL配置段，将上面的网站地址填入到url对应的字段中，root则填入对应的路径位置，就是在刚才创建仓库的时候指定的那个路径。这样才能保证网站发布后，能找到对应的css和js资源，否则会因为找不到想着资源而引起页面主题不生效。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> URL</span></span><br><span class="line"><span class="meta">#</span><span class="bash"><span class="comment"># If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'</span></span></span><br><span class="line">url: http://tshfut.gitee.io/articles</span><br><span class="line">root: /articles</span><br><span class="line">permalink: :year/:month/:day/:title/</span><br><span class="line">permalink_defaults:</span><br><span class="line">pretty_urls:</span><br><span class="line">  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks</span><br><span class="line">  trailing_html: true # Set to false to remove trailing '.html' from permalinks</span><br></pre></td></tr></table></figure>

<p>最后，执行下面的命令，将本地的文章推送到gitee上，然后再通过pages更新下内容即可。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br><span class="line">hexo clean &amp;&amp; hexo g &amp;&amp; hexo d</span><br></pre></td></tr></table></figure>

<p>至此，博客就搭建基本就完成了，以后在/Hexo/source/_posts目录下就可以写博客就杺了！</p>
<h3 id="2-踩坑"><a href="#2-踩坑" class="headerlink" title="2 踩坑"></a>2 踩坑</h3><h4 id="（1）显示图片问题"><a href="#（1）显示图片问题" class="headerlink" title="（1）显示图片问题"></a>（1）显示图片问题</h4><p>这个折腾了很久，网上其他文章说的方法也没有错，但是就是显示不出来，后面发现其实是hexo的处理图片路径有问题（正解： <a href="https://blog.csdn.net/xjm850552586/article/details/84101345" target="_blank" rel="noopener">https://blog.csdn.net/xjm850552586/article/details/84101345</a> ）</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://tshfut.gitee.io/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/" data-id="ck5w8e82000052wuf5qe3d3se" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/articles/2020/01/25/Android%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91%E7%B3%BB%E5%88%97/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          Android系统开发系列
        
      </div>
    </a>
  
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/articles/categories/android/">android</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/articles/tags/android/" rel="tag">android</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/articles/tags/android/" style="font-size: 10px;">android</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/articles/archives/2020/01/">January 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/articles/2020/01/26/Android-BootAnimation%E5%88%86%E6%9E%90/">Android BootAnimation分析</a>
          </li>
        
          <li>
            <a href="/articles/2020/01/26/SurfaceFlinger%E5%90%88%E6%88%90%E6%B5%81%E7%A8%8B/">SurfaceFlinger合成流程</a>
          </li>
        
          <li>
            <a href="/articles/2020/01/25/Android%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91%E7%B3%BB%E5%88%97/">Android系统开发系列</a>
          </li>
        
          <li>
            <a href="/articles/2020/01/25/%E4%BD%BF%E7%94%A8Hexo-Gitee%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/">使用Hexo-Gitee创建个人网站</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 tshfut<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/articles/" class="mobile-nav-link">Home</a>
  
    <a href="/articles/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/articles/fancybox/jquery.fancybox.css">

  
<script src="/articles/fancybox/jquery.fancybox.pack.js"></script>




<script src="/articles/js/script.js"></script>




  </div>
</body>
</html>